安装gulp
gulp推荐安装到项目目录,不推荐全局目录,因为后期gulp会自动引入项目相关的支持包,如果全局安装gulp,这些支持包全都安装在/usr/local/lib/node_modules/下,不利于管理,可能易引起冲突。
npm install gulp
安装常用插件
// js压缩
gulp-uglify
// css压缩
gulp-clean-css
// 重命名
gulp-rename
// 合并文件
gulp-concat
// 捕获错误
gulp-plumber
// 打包
gulp-zip
//过率console信息
gulp-strip-debug
在gulpfile.js中载入插件
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var plumber = require('gulp-plumber');
var zip = require('gulp-zip');
var browserSync = require('browser-sync');
自动压缩css重命名
定义一个任务compress-css,压缩static文件夹下面的index.css,并且重命名为index.min.css,保存到build文件夹下面
gulp.task('compress-css', function() {
gulp.src('static/index.css')
.pipe(minifyCss())
.pipe(rename('index.min.css'))
.pipe(gulp.dest('build'));
});
自动压缩js代码并且重命名
定义一个任务compress-js,压缩static文件夹下面的index.js,并且重命名为index.min.js,保存到build文件夹下面
gulp.task('compress-js', function() {
gulp.src('static/index.js')
.pipe(uglify())
.pipe(rename('index.min.js'))
.pipe(gulp.dest('build'));
});
自动合并文件
合并src下面的js文件,重命名为all.js,保存在build文件夹下面
gulp.task('minify', function (){
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('build'))
});
执行某个任务
gulp teskname
监视文件变化
这里定义一个默认的任务,只需要在gulp里面输入gulp
gulp.task('default', function(){
gulp.watch('src/*.*', function(){
gulp.run('teakname')
});
});
打包发布任务
新建任务zip,将build文件夹下面的文件全部打包为publish.zip,发布到release文件夹下面
gulp.task('zip', function(){
return gulp.src('build/*')
.pipe(plumber())
.pipe(zip('publish.zip'))
.pipe(gulp.dest('release'))
});
自动刷新浏览器
新建任务start,启用一个本地server,监视当前目录下的所有文件,一旦文件变化,浏览器reload
gulp.task('start', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch('./*', function() {
browserSync.reload();
});
})
在build任务中过滤目标文件中的console.log();
var stripDebug = require('gulp-strip-debug');
gulp.task('build', function () {
.gulp.src()
.pipe(stripDebug())
.pipe(gulp.dest());
});
监听gulp任务结束,执行回调
gulp.task('dev', function(){
gulp.src(src)
.pipe(rename('app.js'))
.on('end',function(){
console.log('这里是回调')
})
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。